<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>directive</title>
</head>
<body>

<div id="app">
    <h2>{{msg}}</h2>
<!--    <input type="text" v-focus />-->
    <p>-----------------</p>
    <auto_focus_component   ></auto_focus_component>
</div>

<script src="../vue.global.js"></script>
<template id="auto_focus_component">
    <input type="text" v-focus/>

</template>
<script>

    const autoFocusComponent = {

        template:'#auto_focus_component',

        directives:{
            focus:{
                mounted(el) {
                    el.focus()
                }
            }
        }
    }

    const app = Vue.createApp({
        data(){
            return {
                msg:"hello"
            }
        },
        components:{
            auto_focus_component:autoFocusComponent
        }
    })



    // app.directive("focus",{
    //     mounted(el){
    //         el.focus()
    //     }
    // })
    app.mount("#app")
</script>
</body>
</html>